<template>
    <div>
        <!--  opened Dialog 打开动画结束时的回调 -->
        <el-dialog @opened="opened" :title="info.title" :visible.sync="info.isShow" :before-close="close">
            <el-form :model="form" :rules="rules" ref="form1">

                <el-form-item label="上级分类" :label-width="formLabelWidth" prop="pid">
                    <el-select v-model="form.pid">
                        <el-option label="顶级分类" :value="0"></el-option>
                        <el-option v-for="item in cate" :key="item.id" :label="item.catename" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="分类名称" :label-width="formLabelWidth" prop="catename">
                    <el-input v-model="form.catename" autocomplete="off"></el-input>
                </el-form-item>

                <!-- on-preview	点击文件列表中已上传的文件时的钩子
                        on-remove	文件列表移除文件时的钩子
                        file-list 上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]
                        auto-upload  是否在选取文件后立即进行上传
                -->
                <el-form-item v-show="form.pid !== 0" label="图片" :label-width="formLabelWidth">
                    <el-upload action="#" list-type="picture-card" :on-change="change"
                        :on-preview="handlePictureCardPreview" :file-list="fileList" :auto-upload="false">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </el-form-item>


                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ccc" :active-value="1"
                        :inactive-value="2">
                    </el-switch>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
                <el-button v-if="info.isAdd" type="primary" @click="confirm">确 定</el-button>
                <el-button v-else type="primary" @click="amend">修 改</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { cateAdd, cateInfo, cateEdit } from '@/request/api'
import { successAlert, warningAlert } from '@/utils/alert'
import { mapActions, mapGetters } from 'vuex'
export default {
    data() {
        return {
            formLabelWidth: '120px',
            form: {
                pid: '',  //上级分类编号
                catename: '',  //商品分类名称
                img: '',  //图片(文件，一般用于二级分类
                status: 1, //状态        1正常2禁用
            },
            rules: {
                pid: [
                    { required: true, message: '请选择上级分类', trigger: 'change' }
                ],
                catename: [
                    { required: true, message: '请输入分类名称', trigger: 'blur' },
                    { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
                ]
            },
            //图片上传
            dialogImageUrl: '', //预览图片地址
            dialogVisible: false, //图片预览是否展示
            fileList: []  // 图片的数据数组

        }
    },
    methods: {
        ...mapActions({
            requestCate: 'cate/listActions'
        }),
        //修改
        amend() {
            cateEdit(this.form).then(res => {
                // console.log(res);
                if (res.code === 200) {
                    //消息提示
                    successAlert(res.msg)
                    //取消弹窗
                    this.cancel()
                    //更新列表
                    this.requestCate()

                }
            })
        },
        getDetail(id) {
            // console.log(id);
            cateInfo({ id }).then(res => {
                // console.log(res);
                if (res.code === 200) {
                    this.form = res.list
                    this.form.id = id
                    this.fileList = this.form.img ? [{ url: 'http://localhost:3000' + this.form.img }] : []

                }
            })

        },
        //取消
        cancel() {
            this.info.isShow = false
            this.form = {
                pid: '',  //上级分类编号
                catename: '',  //商品分类名称
                img: '',  //图片(文件，一般用于二级分类
                status: 1, //状态        1正常2禁用
            }
            //取消表单
            this.$refs.form1.resetFields()
            //重置照片
            this.fileList = []

        },
        close() {
            this.cancel()
        },
        //确定
        confirm() {
            this.$refs.form1.validate((val) => {
                if (!val) {
                    return
                }
                // console.log(this.form);
                cateAdd(this.form).then(res => {
                    // console.log(res);
                    if (res.code === 200) {
                        //消息提示
                        successAlert(res.msg)
                        //取消弹窗
                        this.cancel()
                        //更新列表
                        this.requestCate()
                    }
                })
            })
        },
        opened() {
            this.requestCate()
        },
        //点击预览图片
        handlePictureCardPreview() {
            this.dialogVisible = true;
        },
        //文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
        change(file, fileList) {
            // console.log(file);
            this.dialogImageUrl = file.url  //取得图片的地址
            this.form.img = file.raw
        }
    },
    props: ['info'],
    mounted() {

    },
    watch: {},
    computed: {
        ...mapGetters({
            cate: 'cate/list'
        })
    },
    filters: {},
    components: {}
}
</script>
<style scoped></style>